<template>
	<div class="classTask">
		<div class="classIndex_h">
			<span>班级作业</span>
		</div>
		<!--  -->
		<div class="classNotice_search">
			<div class="achievement_type">
				<label>
					<input type="radio" name="task" checked>
					<span @click="changeCount(-1)">全部</span>
				</label>
				<label>
					<input type="radio" name="task">
					<span @click="changeCount(1)">进行中</span>
				</label>
				<!-- <label>
					<input type="radio" name="task">
					<span @click="changeCount(2)">未开始</span>
				</label> -->
				<label>
					<input type="radio" name="task">
					<span @click="changeCount(0)">已结束</span>
				</label>
			</div>
			<router-link :to="{path: '/class/homework/add', query: {id: path}}">布置作业</router-link>
		</div>
		<ul class="classTK clear" v-loading="loading">
			<li class="classTask_ls fl" v-for="(item, index) in taskList" :key="index">
				<h3 :title="item.name">{{item.class_name}}，{{item.name}}</h3>
				<div class="classTask_l2 clear">
					<div class="classTask_l2_l fl">
						<el-progress type="circle" :percentage="item.task_count.success_count/item.task_count.all_count*100" :show-text="false" :width='90' color="#3cc080"></el-progress>
						<p>{{item.task_count.success.length}} / {{item.task_count.success.length + item.task_count.un_success.length}}</p>
					</div>
					<div class="classTask_l2_r f1">
						<div>
							<span><strong>{{item.user_name}}</strong><i>发布</i> </span>
						</div>
						<div>
							<span>{{item.end_time}}<i>截止</i> </span>
						</div>
					</div>
				</div>
				<div class="classTask_l3 clear">
					<span>{{item.class_name}}</span>
					<i class="Tstate_n fr" v-if="item._status === '已结束'">{{item._status}}</i>
					<i class="Tstate_y fr" v-if="item._status === '进行中'">{{item._status}}</i>
				</div>
				<div class="classTask_lk">
					<router-link :to="{path: '/class/homework/detail', query: {id: path, tid: item.id}}">查看进度</router-link>
				</div>
				<template>
					<i v-if="item.answer_status == 1" class="el-icon-sunny" title='已完成'></i>
					<i v-if="item.answer_status == 0" class="el-icon-lightning" title="未完成"></i>
				</template>
				<template>
					<!-- 3.试卷，4.视频，5.课件 -->
					<i v-if="item.type <=  3" class="el-icon-tickets" title="试卷作业"></i>
					<i v-if="item.type === 4" class="el-icon-video-play" title="视频作业"></i>
					<i v-if="item.type === 5" class="el-icon-collection" title="课题作业"></i>
				</template>
				<i v-if="item.is_praise ==  1" class="el-icon-bell" title="已批阅"></i>
			</li>
		</ul>
		<div class="pageBox" v-if="total_number > page_size">
			<el-pagination @current-change="change_page" :page-size="page_size" :current-page="page_index" layout="prev, pager, next" :total="total_number">
			</el-pagination>
		</div>
		<div class="dependent" v-if="placeholder">
			<i class="ipm image_nofound"></i>
			<p>还没发现任何相关的内容哦~</p>
		</div>
	</div>
</template>
<script>
export default {

	data() {
		return {
			path: this.$route.query.id,
			task_id: '',
			taskList: [],
			page_index: 1,
			page_size: this.$g.page_size,
			total_number: 0,
			Qstate: -1,
			placeholder: false,
			loading: true,
			taskTotal: 0
		}
	},
	created() {

	},
	watch: {

		'$store.state.changData': {
			handler(val, newval) {
				this.path = sessionStorage.getItem('classId')
				this.getTaskList()
			},
			immediate: true
		}
	},
	computed: {
		changData() {
			return deep_clone(this.$store.state.changData);
		},
	},
	methods: {
		//任务列表
		getTaskList() {
			let success = (res => {
				let data = res.data;
				this.loading = false
				this.taskList = data.data;
				this.placeholder = this.taskList.length === 0 ? true : false;
				this.total_number = data.data_sum;
				this.page_index = parseInt(data.page_index);
				this.filterData(this.taskList)


			});
			this.$ajax({
				url: 'api/org/class_something',
				method: 'get',
				params: {
					page: this.page_index,
					size: this.page_size,
					classid: this.path,
					timestatus: this.Qstate,
					data_type: 2,
					style: 6
				},
				func: { success: success }
			})
		},
		//时间转换
		filterData(arr) {
			let time,
				time2,
				time3,
				number;

			arr.filter((item, index) => {

				if (item.end_time) {
					time = item.end_time.substring(5, 7)
					time2 = item.end_time.substring(8, 10)
					time3 = item.end_time.substring(11, 16)
				}

				number = `${time}月${time2}日 ${time3}`
				this.taskList[index].end_time = number
			})
		},
		//分页
		change_page(val) {
			this.page_index = val;
			this.getTaskList()
		},
		changeCount(status) {
			this.Qstate = status;
			this.getTaskList()
		}
	}
}
</script>